<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    	<% 
String path = request.getContextPath(); 
// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）: 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE html>
<html>
<head>
<base href=" <%=basePath%>"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="后台销售统计">
<meta name="author" content="xwj">
<title>销售统计</title>
  <link href="bootstrap/bootstrap.css" rel="stylesheet"> 

<link href="css/admin_css/assets/font-awesome/css/font-awesome.css"
	rel="stylesheet" />
<link rel="stylesheet" type="text/css"
	href="css/admin_css/assets/css/zabuto_calendar.css">
 <link rel="stylesheet" type="text/css"
	href="css/admin_css/assets/js/gritter/css/jquery.gritter.css" />
<link rel="stylesheet" type="text/css"
	href="css/admin_css/assets/lineicons/style.css">

 <link href="css/admin_css/assets/css/style.css" rel="stylesheet"> 
<link href="css/admin_css/assets/css/style-responsive.css"
	rel="stylesheet">  
<script src="jquery/jquery-2.2.4.min.js"></script>
 <script src="bootstrap/bootstrap.min.js"></script>

<script class="include" type="text/javascript"
	src="css/admin_css/assets/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="css/admin_css/assets/js/jquery.scrollTo.min.js"></script>
<script src="css/admin_css/assets/js/common-scripts.js"></script> 

 <script src="bootstrap/bootstrap.min.js"></script>

<!-- 分页工具 -->
<script type="text/javascript" src="jsutil/echarts.min.js"></script>
   
    <script type="text/javascript">
    var names = [];    //类别数组（实际用来盛放X轴坐标值）
    var nums = [];    //销量数组（实际用来盛放Y坐标值）

    $(function() {
    	getData();
	}
    );
    function getData(){
    	
    	$.ajax({
			url : 'booksMsg/getTopBooks.do',
			type : 'POST',
			async : "true",
			data : {
			},
			dataType : 'json',
			success : function(data) {
				if (data.res > 0) {
					  //请求成功时执行该函数内容，result即为服务器返回的json对象
	                $.each(data.list, function (index, item) {
	                    names.push(item.bname);    //挨个取出类别并填入类别数组                    
	                    nums.push(item.bsalenum);    //挨个取出销量并填入销量数组
	                });
	                setData();  
				}
			}
		});
    }
    function setData(){
    	 // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '书籍销售统计'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: names
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: nums
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
  </script>
 
</head>
<body>
<section id="container" >
     
      <!--header start-->
     <%@include file="header.jsp"%>
      <!--header end-->

      <!--sidebar start-->
        <aside>
          <div id="sidebar"  class="nav-collapse ">
              <!-- sidebar menu start-->
              <ul class="sidebar-menu" id="nav-accordion">
              
              	  <p class="centered"><a href="admin/adminmag.jsp"><img src="images/admin7.png" class="img-circle" width="60"/></a></p>
              	  <h5 class="centered">${admin.aname}</h5>
              	  	
                  <li class="mt">
                      <a class="active" href="admin/index.jsp">
                          <i class="fa fa-bar-chart-o"></i>
                          <span>销售统计</span>
                      </a>
                  </li>

                  <li class="sub-menu">
                      <a  href="javascript:;" >
                          <i class="fa fa-book"></i>
                          <span>书籍</span>
                      </a>
                      <ul class="sub">
                          <li ><a  href="admin/bookmag.jsp">书籍管理</a></li>
                          <li ><a  href="admin/categorymag.jsp">类别管理</a></li>
                       
                      </ul>
                  </li>

                  <li class="sub-menu">
                      <a  href="javascript:;" >
                          <i class="fa fa-users"></i>
                          <span>账户</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="admin/usermag.jsp">用户管理</a></li>
                          <li ><a  href="admin/adminmag.jsp">管理员管理</a></li>
                        
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-user"></i>
                          <span>会员</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="admin/membermag.jsp">会员折扣管理</a></li>
                       
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-shopping-cart"></i>
                          <span>订单</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="admin/ordermag.jsp">订单管理</a></li>
                      </ul>
                  </li>
                 
              </ul>
              <!-- sidebar menu end-->
          </div>
      </aside>
      <!--sidebar end-->
       <!-- **********************************************************************************************************************************************************
     以上是不变的内容--包括上边header和左边aside33###以下是变化的内容
      *********************************************************************************************************************************************************** -->
  <!--main content start-->
  
     <section id="">
       <section class="wrapper">
				
		 <div id="main" style="width:80%;height:400px;margin-left:20%;margin-top:30px;"></div>

         </section>
      </section>
 

      <!--main content end-->
     
  </section>

 

</body>
</html>